<template>
  <tn-popup
    v-model="showPopup"
    mode="center"
    bg-color="transparent"
    :content-custom-style="customStyle"
    close-icon=""
    width="64%"
    :z-index="zIndex"
  >
    <view class="tn-modal">
      <view class="tn-modal__wrap">
        <view v-if="title" class="tn-modal__title tn-text-ellipsis-1">{{ title }}</view>
        <view v-if="content" class="tn-modal__content">{{ content }}</view>
      </view>
      <view class="tn-modal__buttons">
        <view
          v-if="showCancel"
          class="tn-modal__btn tn-modal__btn--cancel"
          hover-class="tn-hover"
          :hover-stay-time="150"
          :style="cancelButtonStyle"
          @tap.stop="handleButtonClick('cancel')"
        >{{ cancelButton.text }}</view>
        <view
          v-if="showConfirm"
          class="tn-modal__btn tn-modal__btn--confirm"
          hover-class="tn-hover"
          :hover-stay-time="150"
          :style="confirmButtonStyle"
          @tap.stop="handleButtonClick('confirm')"
        >{{ confirmButton.text }}</view>
      </view>
    </view>
  </tn-popup>
</template>

<script lang="ts" setup>
import { modalProps, modalEmits, ModalDataButton } from '../../../types/tn-modal'
import { ref, computed, CSSProperties, watch } from 'vue'
import { UPDATE_MODEL_EVENT } from '../../../constants'
import TnPopup from '../../tn-popup/src/Popup.vue'


const props = defineProps(modalProps)
const emits = defineEmits(modalEmits)

// 数据内容
const title = computed<string>(() => {
  return props?.data?.title || ''
})
const content = computed<string>(() => {
  return props?.data?.content || ''
})
const confirmButton = computed<ModalDataButton>(() => {
  const confirm = props?.data?.confirm
  return {
    text: confirm?.text || '确认',
    bgColor: confirm?.bgColor || '',
    color: confirm?.color || ''
  }
})
const cancelButton = computed<ModalDataButton>(() => {
  const cancel = props?.data?.cancel
  return {
    text: cancel?.text || '取消',
    bgColor: cancel?.bgColor || '',
    color: cancel?.color || ''
  }
})

// 确认按钮样式
const confirmButtonStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (confirmButton.value.bgColor) style.backgroundColor = confirmButton.value.bgColor
  if (confirmButton.value.color) style.color = confirmButton.value.color
  return style
})
// 取消按钮样式
const cancelButtonStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (cancelButton.value.bgColor) style.backgroundColor = cancelButton.value.bgColor
  if (cancelButton.value.color) style.color = cancelButton.value.color
  return style
})

// 控制弹框显示
let showPopup = ref<boolean>(false)
watch(showPopup, (val: boolean) => {
  emits(UPDATE_MODEL_EVENT, val)
  if(!val) {
    emits('close')
  }
})
watch(() => props?.modelValue, (val: boolean) => {
  showPopup.value = val
})

// 处理按钮点击事件
const handleButtonClick = (type: 'confirm' | 'cancel') => {
  if (type === 'confirm') emits('confirm')
  else if (type === 'cancel') emits('cancel')

  showPopup.value = false
}
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>

@import '../../../theme.scss';

.tn-modal {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  overflow: hidden;
  background-color: #FFFFFF;

  &__wrap {
    padding: 36rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  &__title {
    font-size: 28rpx;
    margin-bottom: 14rpx;
  }
  &__content {
    font-size: 36rpx;
  }

  &__buttons {
    width: 100%;
    display: flex;
    border-top: 1rpx solid #E6E6E6;
    align-items: center;
    justify-content: space-around;
  }
  &__btn {
    flex: 1;
    padding: 22rpx;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    &:nth-child(2) {
      border-left: 1rpx solid #E6E6E6;
    }

    &--cancel {
      color: map-get(map-get($tn-type-color-map, 'danger'), 'normal');
    }
    &--confirm {
      color: $tn-main-color;
    }
  }
}
</style>
